 <!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div v-for="item in items" :key="item.key" class="contextmenu__item" @click="handleClick(item.key)">{{ item.name }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

const defaultItems = [{ key: 1, name: 'Edit' }]
export default {
  name: 'Contextmenu',
  props: {
    items: {
      type: Array,
      default: defaultItems
    }
  },
  data() {
    return {
      row: {}
    }
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar
    })
  },
  methods: {
    init(row, column, event) {
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      const menu = document.querySelector('#contextmenu')
      const cha = document.body.clientHeight - event.clientY
      console.log(document.body.clientHeight, event.clientY, cha, event.clientX)
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 150) {
        menu.style.top = event.clientY - 120 + 'px'
      } else {
        menu.style.top = event.clientY - 10 + 'px'
      }
      let left = 50
      if (this.sidebar.opened) {
        left += 150
      }
      console.log(event.clientX - left)
      menu.style.left = event.clientX - left + 'px'
      // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      document.addEventListener('click', this.foo)
      this.row = row
    },
    foo() {
      this.$emit('foo')
    },
    handleEdit() {
      this.$emit('handleEdit', this.row)
    },
    handleMove() {
      this.$emit('handleMove', this.row)
    },
    handleDelete() {
      this.$emit('handleDelete', this.row)
    },
    handleAttribute() {
      this.$emit('handleAttribute', this.row)
    }
  }
}
</script>

<style scoped>
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
}
.contextmenu {
  position: absolute;
  background-color: #ecf5ff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>
